<template>
  <div class="page-work-my-adviser">
    <h4 class="page-work-title">
      <label>顾问列表</label>
      <el-button 
        type="primary"
        @click="$router.push({name: 'myAdviserAdd'})">添加顾问</el-button>
    </h4>

    <ul class="adv-list">
      <li class="item"
        v-for="item in dataList" :key="item.id"
        :class="{'no-accept': item.state === '0'}"
        @click="openQrcode(item)">
        <div class="img">
          <img :src="item.headimg" alt>
        </div>
        <div class="txt">
          <h4>{{item.name}}</h4>
          <p>{{item.desc}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { advList } from '../../api/adviser'
export default {
  name: "adviser",
  data() {
    return {
      dataList: [],
      hadLoad: false
    }
  },
  methods: {
        getDataList(){
            advList({
                designerId: localStorage.designerId,
                statue: 2
            }).then(rsp => {
                if(rsp.code === 200){
                  if(rsp.data && rsp.data.length > 0){
                      this.dataList = rsp.data
                    }else{
                      this.$router.push({name: 'myAdviserEmpty'})
                    }
                }
                this.hadLoad = true
            })
        },

        openQrcode(item){
          if(item.state === '0'){
            this.$router.push({name: 'myAdviserResult', params: {id: item.id}, query: { read: true }})
          }
        }
    },
    created(){
        this.getDataList()
    }
}
</script>

<style lang="less">
.page-work-my-adviser {
  .page-work-title{
    .el-button{
      float: right;
      margin-right: 50px;
    }
  }
  .adv-list {
    padding: 20px 50px;
    &:after {
      content: "";
      display: table;
      clear: both;
    }
    .item {
      float: left;
      width: 50%;
      margin-bottom: 30px;
      display: flex;
      align-items: center;
      &.no-accept{
        .img{
          position: relative;
          &:before{
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            content: '还未接收邀请';
            color: #fff;
            font-size: 13px;
            text-align: center;
            line-height: 140px;
            cursor: pointer;
            background-color: rgba(27, 60, 146, .5);
          }
        }
      }
      .img {
        width: 140px;
        height: 140px;
        position: relative;
        &:after {
          content: "";
          position: absolute;
          right: 0;
          top: 50%;
          margin-top: -5px;
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-right: 10px solid #fff;
        }
        img {
          display: block;
          margin: 0 auto;
          width: 100%;
          height: 100%;
        }
      }
      .txt {
        flex: 1;
        margin-left: 20px;
        h4 {
          margin-bottom: 10px;
          font-size: 16px;
        }
        p {
          font-size: 13px;
          line-height: 1.5;
          color: #707070;
        }
      }
    }
  }
}
</style>


